<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
      <!-- 理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凑单品</title>

    <script src="./lib/zepto/zepto.min.js"></script>
    <script src="./lib/art-template/template-web.js"></script>
    <link rel="stylesheet" href="./lib/font-awesome/css/font-awesome.min.css">

    <script src="./js/conmon.js"></script>
    <script src="./js/singleProducts.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/singleProducts.css">
</head>


<body>

    <div class="header">
        <div class="left">
            <a href="./index.html">
                <i class="iconfont">&#xe511;</i>
            </a>
        </div>
        <div class="center">
            <h1>凑单品</h1>
        </div>
        <div class="right">
            <a href="#">
                <!-- <i class="iconfont">&#xe6b0;</i> -->
                <img src="./images/header_app.png" alt="">
            </a>
        </div>
    </div>


    <div class="box">
        <div class="hd">
            <div class="filter">
                <ul id="sanJiao">
                    <li>
                        <a href="javascript:;" class="pinPai" data-type="shopid">
                            <span>京东</span>
                            <i class="fa fa-sort-desc"></i>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="diQu" data-type="areaid">
                            <span>华北</span>
                            <i class="fa fa-sort-desc"></i>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="money">
                            <span>1元</span>
                            <i class="fa fa-sort-desc"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont">&#xe6b0;</i>          
                </a>
            </div>
        </div>

        <!-- 弹出 -搜索 -->
        <div class="popsearch">
            <div class="formsch clearfix">
                <div class="txt">                    
                <input type="search" value="" oninput="delInput();" placeholder="搜索您想要的凑单品">
                    <a href="javascript:;" class="a-delput"></a>
                </div>
                <div class="smt">
                <input type="button" value="搜索" onclick="search()">
                </div>
            </div>
            <div class="select ">
                <div class="t">排序</div>
                <div class="c">
                    <div class="orderBy">
                    <div>
                       <a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=phone&sort=0
                       ">销量</a>
                    </div>
                    <div>
                        <a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=phone&sort=1
                        ">价格↑</a>
                    </div>
                    <div>
                        <a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=phone&sort=2">价格↓</a>
                    </div>
                     </div>                
                </div>
            </div>
            <div class="t">分类</div>
              <div class="c">
                
                    <div class="catagrate">
                        <a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=0&words=
                        ">全部</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=1&words=
                            ">家居</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=2&words=
                            ">数码</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=3&words=
                            ">办公</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=5&words=
                            ">个护</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=4&words=
                            ">食品</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=6&words=
                            ">母婴</a></div>
                        <div><a href="http://m.manmanbuy.com/coudan/CoudanList.aspx?money=1&area=2&site=1&areaMoney=3&socfrom=mmbapp&words=&sort=0&cat=7&words=
                            ">服饰</a></div>                
            </div>
            
        </div>


        <!-- body -->
        <div class="bd">
            <ul id="container" class="masonry">
            </ul>
        </div>

        <!-- 下拉菜单 -->
        <div class="fd">
            <ul id="xuanRan">
                <!-- <li class="on">
                    <a href="javascript:;">
                        <span>京东</span>
                        <span class="fa fa-check"></span>
                    </a>
                </li>
                 -->                                               
            </ul>
        </div>                  

        <!-- 主体 内容 -->
        <script type="text/html" id="product">
            {{each result}}
            <li data-id="{{$value.productId}}">
                <a href="#">
                    <div class="pic">
                        <img src="{{$value.productImg}}">
                    </div>
                    <div class="title">{{$value.productName}}</div>
                    <div class="other">
                        <div class="price">
                            {{$value.productPrice}}
                        </div>
                    </div>
                </a>
            </li>
            {{/each}}
        </script>
        <!-- 平台 -->
        <script type="text/html" id="pinPai">
            {{each result}}
            <li class="on shopId" data-id="{{$value.shopId}}">
                <a href="javascript:;">
                    <span class="shopName">{{$value.shopName}}</span>

                    <% if($value.shopnum){}else{$value.shopnum=0;}%>
                        {{if $value.shopnum==$index}}
                        <span class="fa fa-check"></span>
                        {{/if}}
                </a>
            </li>
            {{/each}}
        </script>
        <!-- 区域 -->
        <script type="text/html" id="diQu">
            {{each result}}
            <li class="on areaId" data-id="{{$value.areaId}}">
                <a href="javascript:;">
                    <span>{{$value.areaName}}</span>

                    <% if($value.areaNum){}else{$value.areaNum=0;}%>
                        {{if $value.areaNum==$index}}
                        <span class="fa fa-check"></span>
                        {{/if}}
                </a>
            </li>
            {{/each}}
        </script>
        <!-- 价格排序 -->
        <script type="text/html" id="money">
            <li>
                <a href="javascript:;">
                    <span data-zeor="zero">所有价格</span>
                    <span data-one="one">1~3元</span>
                    <span data-two="two">3~5元</span>
                    <span data-three="three">5~10元</span>
                    <span data-four="four">10~15元</span>
                    <span data-five="five">15元以上</span>
                </a>
            </li>                      
        </script>
        <!-- 点击获取 对应的价额 -->
        <script>
              $(function(){
                $('.money').click(function(){
                    console.log("123");
                    $(this).parent().siblings().children().children('i').attr('class', 'fa fa-sort-desc');

                    if($(this).children('i').hasClass('fa fa-sort-desc')){
                        $(this).children('i').attr('class', 'fa fa-sort-up');
                        
                        $('.fd').show();
                    } else {
                        $(this).children('i').attr('class', 'fa fa-sort-desc');
                        $('.fd').hide();

                    }
                })

            })
        </script>

    </div>


</body>

</html>

<!-- 字体自适应 -->
<!-- <script>
        onload = function () {
          setHTML();
      
          // 为了在pc端更好的去调试
          onresize = function () {
            setHTML();
          }
      
          function setHTML() {
            // 基础值
            var baseVal = 100;
            // 设计稿的宽度
            var pageWidth = 640;
            // 要适配的屏幕的宽度?
            var screenWidth = document.querySelector("html").offsetWidth;
            // 要设置的fontsize
            var fontsize = screenWidth * baseVal / pageWidth;
      
            // 设置到html标签的中
            document.querySelector("html").style.fontSize = fontsize + "px";
      
          }
        }
          
</script> -->
      


